<template>
  <div>
    <el-button type="primary" @click="dialogVisible=true">开始验证</el-button>
    <el-dialog
      title="请拖动滑块完成安全验证"
      :visible.sync="dialogVisible"
      width="360px"
      class="verification-dailog"
    >
      <slide-verify
        :l="42"
        :r="10"
        :w="310"
        :h="155"
        slider-text="向右滑动"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
      />
      <div>{{ msg }}</div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    // const origin = window.location.origin
    return {
      dialogVisible: false,
      msg: ''
      // imgs: [`${origin}/verification/a.jpeg`, `${origin}/verification/b.jpeg`]
    }
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {

  },
  methods: {
    onSuccess() {
      this.msg = 'login success'
    },
    onFail() {
      this.msg = ''
    },
    onRefresh() {
      this.msg = ''
    }
  }
}
</script>
<style scoped lang='scss'>
.verification-dailog{
/deep/ .el-dialog__body{
  padding-top: 10px !important;
}
}
</style>
